{% extends 'base.html' %}
{% load static %}
{% block title %}用户管理 - 新增用户{% endblock %}
{% block content %}
<!-- 内容标题栏 -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h1 class="m-0 text-dark">用户管理</h1>
            </div><!-- /.col -->
            <div class="col-sm-12">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">首页</a></li>
                    <li class="breadcrumb-item active">用户管理</li>
                    <li class="breadcrumb-item active"><a href="{% url 'login:user_add' %}">创建用户</a></li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /内容标题栏 -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card card-secondary cart-outline">      <!--蓝绿色标题背景-->
                    <div class="card-header">
                        <h3 class="card-title">新增用户</h3>
                        <a href="{% url 'login:import_user' %}" style="float: right;" class="text-warning"><i class="fa fa-upload"> 批量导入</i></a>
                    </div>
                    <div class="card-body">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">用户名<span class="text-danger">*</span></label>
                            <div class="col-sm-9 js-uname">
                                <input  class="form-control" type="text" id="username"><span></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">邮箱地址<span class="text-danger">*</span></label>
                            <div class="col-sm-9 js-email">
                                <input  class="form-control" type="text" id="email"><span></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">手机号码<span class="text-danger">*</span></label>
                            <div class="col-sm-9 js-mobile">
                                <input  class="form-control" type="text" id="mobile"><span></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">直属领导</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="direct_leader">
                                    <option style="display: none;" disabled selected>请选择直属领导</option>
                                    {% for user in direct_leader %}
                                    <option value="{{ user.username }}">{{ user.username }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">用户部门</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="department">
                                    <option style="display: none;" disabled selected>请选择部门</option>
                                    {% for group in Department_info %}
                                    <option value="{{ group.id }}">{{ group.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">用户职位</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="position">
                                    <option style="display: none;" disabled selected>请选择职位</option>
                                    {% for p in all_position %}
                                    <option value="{{ p.id }}">{{ p.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">用户状态</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="is_active">
                                    <option style="display: none;" disabled selected>请选择</option>
                                    <option value="1" selected>有效</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                            {% if request.user.is_superuser or request.user.is_staff %}
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">用户角色</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="role" id="role">
                                    {% for role in role_info %}
                                    <option style="display: none;" disabled selected>请选择</option>
                                    <option value="{{ role.id }}">{{ role.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                            {% endif %}
                        <div id="is_charger_div" class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">部门负责人</label>
                            <div class="col-sm-9">
                                <select class="form-control" name="role" id="is_charger">
                                    <option value="1">是</option>
                                    <option value="0" selected>否</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">超级管理</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="is_superuser">
                                    {% if request.user.is_superuser == 1 %}
                                    <option style="display: none;" disabled selected>请选择</option>
                                    <option value="1">是</option>
                                    <option value="0" selected>否</option>
                                    {% else %}
                                    <option value="0" selected>否</option>
                                    {% endif %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right text-primary">设置密码</label>
                            <div class="col-sm-9">
                                <input  class="form-control" type="text" value="admin123@" readonly><span></span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <input class="btn btn-info" type="submit" id="submit" value="注册"/>
                        <button class="btn btn-default float-right" type="button" onclick="btn_cancel()">返回</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% if msg %}
    <!--出错则弹窗告知用户-->
    <script type="text/javascript">
        layui.use('layer',function () {
            var layer=layui.layer;
            info = '{{ msg|safe }}'
            layer.msg(info, function(){
                location.href = "/";  <!--无权限，返回首页-->
            });
        })
    </script>
{% endif %}
{% block custom_js %}
    <script src="{% static 'js/check.js' %}"></script>
<script>
    function btn_cancel() {
        location.href = "/";
    }
</script>
<script>
//post提交的csrf认证
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
$(document).ready(function () {
    $("#submit").click(function () {
        //验证用户所有输入是否有效，有效则提交后台注册
        msg  = ''
        pw1 = $("#pw1").val()
        pw2 = $("#pw2").val()
        if (checkUserName() == 1){
            if(checkEmail() == 1){
                if(checkMoblie() == 1){
                        //所有输入检查通过，提交数据
                        $.ajax({
                            url: '{% url 'login:user_add' %}',
                            type: 'POST',
                            data: {
                                'username':$("#username").val(),
                                'email': $("#email").val(),
                                'mobile': $("#mobile").val(),
                                'department': $("#department").val(),
                                'is_active': $("#is_active").val(),
                                'role': $("#role").val(),
                                'is_superuser': $("#is_superuser").val(),
                                'is_charger': $("#is_charger").val(),
                                'direct_leader': $("#direct_leader").val(),
                                'position': $("#position").val(),
                            },
                            //请求成功后执行提醒
                            success: function (data) {
                                layui.use('layer',function () {
                                    var layer=layui.layer;
                                    if(data.status == 0){
                                        layer.alert(data.info,{
                                            icon: 5,
                                            btn: '确定',
                                            skin: 'layer-ext-moon',
                                        })
                                    }else {
                                        layer.msg(data.info, {
                                            btn: ['继续添加', '返回用户列表','返回首页'],
                                            yes:function () {
                                                location.href = "/login/add";
                                            },
                                            btn2:function () {
                                                location.href = "/login/user/list";
                                            },
                                            btn3:function () {
                                                location.href = "/";
                                            }
                                        })
                                    }

                                })
                            }
                        })
                }else {msg = '手机号码校验失败！'}
            }else {msg = '邮箱校验失败！'}
        }else {msg = '用户名校验失败！'}
    });
})
</script>
{% endblock %}
{% endblock %}
